//reset
html,
body,
div,
dl,
dt,
ol,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
nav,
section,
header,
main,
footer,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}


input,
fieldset,
img {
    border: 0;
    box-sizing: border-box;
}

i,
em,
b {
    font-style: normal;
}
.clearfix:after {
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clear {
    zoom: 1;
}
a {
    text-decoration: none;
    color: inherit;
}

.loop(@n, @i:1) when (@i <= @n) {
    .left@{i}{
        left: @i * 1px;
    }
    .top@{i}{
        top: @i * 1px;
    }
    .bottom@{i}{
        bottom: @i * 1px;
    }
    .right@{i}{
        right: @i * 1px;
    }




    //margin
    .m-row-@{i}{
        margin: 0 @i * 1px;
    }
    .m-col-@{i}{
        margin:@i * 1px 0;
    }
    .mt-@{i} {
		margin-top: @i * 1px;
	}
    .mb-@{i} {
		margin-bottom: @i * 1px;
	}
	.ml-@{i} {
		margin-left: @i * 1px;
	}
	.mr-@{i} {
		margin-right: @i * 1px;
	}
    //padding
    .p-row-@{i}{
        padding: 0 @i * 1px;
    }
    .p-col-@{i}{
        padding: @i * 1px 0;
    }
    .pt-@{i} {
		padding-top: @i * 1px;
	}
    .pb-@{i} {
		padding-bottom: @i * 1px;
	}
	.pl-@{i} {
		padding-left: @i * 1px;
	}
	.pr-@{i} {
		padding-right: @i * 1px;
	}
    //字号大小
    .text-@{i}{
        font-size: @i * 1px;
        line-height: @i * 1px;
    }
	.loop(@n, (@i + 1));
}

.loop(100);

// flex

.flex(@direction:row,@align:center,@justify:center,@wrap:no-wrap){
    display: flex;
    flex-direction: @direction;
    align-items: @align;
    justify-content: @justify;
    flex-wrap: @wrap;
}


